<template>
  <el-dialog v-model="dialogVisible" title="个人信息" width="600px" draggable>
    <div class="user-info-container">
      <el-form :model="userInfo" label-width="150px" size="default" :rules="rules" ref="formRef">
        <el-form-item label="用户头像" prop="avatar">
          <UploadImg
            v-model:image-url="userInfo.wechat_headimage"
            height="140px"
            width="140px"
            border-radius="50%"
            :file-size="3"
          >
            <template #empty>
              <el-icon><Avatar /></el-icon>
              <span>请上传头像</span>
            </template>
            <template #tip> 头像大小不能超过 3M </template>
          </UploadImg>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="userInfo.username" disabled />
        </el-form-item>
        <el-form-item label="用户姓名" prop="real_name">
          <el-input v-model="userInfo.real_name" />
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="userInfo.wechat_nick" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitUserInfo">提交</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import UploadImg from "@/components/Upload/Img.vue";
import { useUserStore } from "@/stores/modules/user";
import { editUser } from "@/api/modules/user";
const userStore = useUserStore();
const dialogVisible = ref(false);
const userInfo = userStore.userInfo;
const openDialog = () => {
  // 可以添加从服务器获取用户信息的逻辑
  dialogVisible.value = true;
};
const formRef = ref<FormInstance>();
const rules = ref<FormRules>({
  real_name: [{ required: true, message: "请输入姓名", trigger: "blur" }]
});
const submitUserInfo = async () => {
  const valid = await formRef.value?.validate().catch(() => false);
  if (!valid) return false;
  const res = await editUser(userInfo);
  if (res.code == "200") {
    // 提交用户信息到服务器的逻辑
    ElMessage.success("信息已提交");
    dialogVisible.value = false;
  }
};
defineExpose({ openDialog });
</script>

<style scoped>
.user-info-container {
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 10px;
}

.avatar-uploader {
  border: 1px dashed #d9d9d9;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: inline-block;
  width: 150px;
  height: 150px;
  text-align: center;
  vertical-align: top;
  border-radius: 50%;
}

.avatar-uploader:hover {
  border-color: #409eff;
}

.avatar {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 6px;
}
</style>
